<template>
  <div class="challenge-sidebar">
    <div class="sidebar-section ranking-board">
      <h2>成就排行榜</h2>
      
      <!-- 排行榜选项卡 -->
      <div class="tabs">
        <div 
          class="tab-header"
          :class="{ active: activeTab === '1' }"
          @click="activeTab = '1'"
        >
          总榜
        </div>
        <div 
          class="tab-header"
          :class="{ active: activeTab === '2' }"
          @click="activeTab = '2'"
        >
          好友榜
        </div>
      </div>
      
      <!-- 排行榜内容 -->
      <div class="ranking-list">
        <div 
          v-for="user in currentRankingList" 
          :key="user.id" 
          :class="['ranking-item', user.rank <= 3 ? 'top-three' : '']"
        >
          <div class="rank-badge">
            {{ renderTrophy(user.rank) }}
          </div>
          <div class="user-avatar" :style="{ backgroundImage: `url(${user.avatar})` }"></div>
          <span class="user-name">{{ user.name }}</span>
          <span class="user-score">{{ user.score }}分</span>
        </div>
      </div>
      
      <div class="current-user-rank">
        <p>您当前排名：第{{ currentUserRank }}名</p>
      </div>
    </div>
    
    <div class="sidebar-section knowledge-cards">
      <h2>环保知识</h2>
      <div 
        v-for="card in knowledgeCards" 
        :key="card.id" 
        class="knowledge-card"
      >
        <h3>{{ card.title }}</h3>
        <p>
          {{ expandedCard === card.id ? card.fullContent : card.summary }}
          <span 
            v-if="expandedCard !== card.id" 
            class="read-more" 
            @click="expandedCard = card.id"
          >
            ...阅读全文
          </span>
        </p>
        <a 
          v-if="card.videoUrl" 
          :href="card.videoUrl" 
          class="video-link" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          查看相关视频 <i class="icon icon-video"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChallengeSidebar',
  props: {
    globalRanking: {
      type: Array,
      required: true
    },
    friendRanking: {
      type: Array,
      required: true
    },
    currentUserRank: {
      type: Number,
      required: true
    },
    knowledgeCards: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeTab: '1',
      expandedCard: null
    };
  },
  computed: {
    currentRankingList() {
      return this.activeTab === '1' ? this.globalRanking : this.friendRanking;
    }
  },
  methods: {
    renderTrophy(rank) {
      if (rank === 1) return '🏆';
      if (rank === 2) return '🥈';
      if (rank === 3) return '🥉';
      return rank;
    }
  }
}
</script>

<style scoped>
/* 组件特定样式，可以从Challenge.css中导入或在这里定义 */
.tabs {
  display: flex;
  margin-bottom: 15px;
}

.tab-header {
  padding: 8px 15px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-header.active {
  border-bottom-color: #42b983;
  font-weight: bold;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.top-three {
  font-weight: bold;
}

.knowledge-card {
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.read-more {
  color: #42b983;
  cursor: pointer;
}
</style> 